<template>
  <div>
    <VueMarkdown
      :markdown="markdown"
      :customAttrs="customAttrs"
      :remarkPlugins="remarkPlugins"
      :rehypePlugins="rehypePlugins"
      :sanitize="false"
      :sanitizeOptions="sanitizeOptions"
    >
      <template v-slot:header="{ children, ...attrs }">
        <div class="custom-slot" v-bind="attrs">
          <VNodeRenderer :nodes="children" />
        </div>
      </template>
      <template v-slot:code="{ children, language, content, ...props }">
        <CodeBlock :code="content" :language="language" />
      </template>
    </VueMarkdown>
  </div>
</template>

<script>
import CodeBlock from './components/CodeBlock.vue'
import VNodeRenderer from './components/VNodeRenderer.vue'
import { VueMarkdown } from '../../packages/vue-markdown-legacy/src/index'

import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import remarkToc from 'remark-toc'
const md = `# Markdown Test

## Structure

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | - | - | - |
| 1 | 2 | 3 | 4 |

## Tasklist

* [ ] to do
* [x] done

## Raw
<div class="note">

A mix of *markdown* and <em>HTML</em>.

</div>

## Math
Lift($$L$$) can be determined by Lift Coefficient ($$C_L$$) like the following
equation.
$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$

## Vue Slot
<div>
<slot slot-name="header" value="123">I am slot</slot>
</div>
`
export default {
  components: {
    VueMarkdown,
    CodeBlock,
    VNodeRenderer
  },
  data() {
    return {
      markdown: md,
      customAttrs: {
        h1: { class: ['heading'] },
        h2: { class: ['heading'] },
        a: (node, combinedAttrs) => {
          if (typeof node.properties.href === 'string' && node.properties.href.startsWith('https://www.google.com')) {
            return { target: '_blank', rel: 'noopener noreferrer' }
          }
          return {}
        }
      },
      remarkPlugins: [remarkGfm, remarkMath, [remarkToc, { heading: 'structure' }]],
      rehypePlugins: [rehypeRaw, rehypeKatex],
      sanitizeOptions: {
        sanitizeOptions: {
          tagNames: ['slot'],
          attributes: {
            slot: ['slot-name', 'value'],
            '*': ['class', 'target', 'rel', 'value', 'slot-name']
          }
        }
      }
    }
  }
}
</script>
